<template>
<div style="display: flex;line-height: 60px">
  <div style="margin-top: 8px;cursor: pointer">
    <i :class="icon" style="font-size: 20px" @click="collapse"></i>
  </div>
  <div style="flex: 1"></div>
  <el-dropdown>
    <span>{{user.username}}</span>
    <i class="el-icon-arrow-down" style="margin-left: 5px; cursor: auto"></i>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="toLogout">退出</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>

</div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "header",
  data(){
    return{
      user : JSON.parse(sessionStorage.getItem('CurUser'))
    }
  },
  props:{
    icon:String
  },
  methods:{
    toUser(){
      console.log('to_user')
    },
    toLogout(){
      console.log('to_logout')
      this.$confirm('您确定要退出登陆吗?','提示',{
        confirmButtonText:'确定',
        type:'warning',
        center: true
      }).then(()=>{
        this.$message({
          type:'success',
          message:'退出成功'
        })
        this.$router.push("/")
        sessionStorage.clear()
      }).catch(()=>{
        this.$message({
          type:'info',
          message:'已取消退出'
        })
      })

    },
    collapse(){
      this.$emit('doCollapse')
    }
  },
  created() {
    this.$router.push("/home")
  }
}
</script>

<style scoped>

</style>